<template>
  <div class="goods">
    <scroll>
      <div class="menu-wrapper">
        <ul>
          <li
            v-for="(item,index) in goodsData "
            :key="index"
            class="menu-item"
            :class="{'current':currentIndex===index}"
            @click="menuClick(index)"
          >
            <span class="text">
              <span class="icon" :class="classMap[item.type]" v-show="item.type>0"></span>
              {{item.name}}
            </span>
          </li>
        </ul>
      </div>
    </scroll>
    <scroll :probeType="3" @scroll="foodsScroll" ref="scroll">
      <div class="foods-wrapper">
        <ul>
          <li v-for="(item,index) in goodsData" :key="index" class="food-list" ref="foods">
            <h1 class="title">{{item.name}}</h1>
            <ul>
              <li
                v-for="(food,indey) in item.foods"
                :key="indey"
                class="food-item"
                @click="foodClick(food)"
              >
                <div class="icon">
                  <img :src="food.icon" />
                </div>
                <div class="content">
                  <h2 class="name">{{food.name}}</h2>
                  <p class="desc">{{food.description}}</p>
                  <div class="extra">
                    <span class="count">月售{{food.sellCount}}份</span>
                    <span>好评率{{food.rating}}%</span>
                  </div>
                  <div class="price">
                    <span class="now">￥{{food.price}}</span>
                    <span v-show="food.oldPrice" class="old">￥{{food.oldPrice}}</span>
                  </div>
                  <div class="cartcontrol-wrapper">
                    <cartControl :food="food"></cartControl>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </scroll>
    <shopCart :deliveryPrice="deliveryPrice" :minPrice="minPrice" :selectFoods="selectFoods"></shopCart>
    <foodDetail :food="selectedFood" v-show="foodDetailShow" @backClick="backClick"></foodDetail>
  </div>
</template>

<script>
import { goodsData } from "../../network/goods";
import { headerData } from "../../network/headerData";
import scroll from "../../components/common/scroll/scroll";
import shopCart from "./comppnents/shopCart";
import cartControl from "../../components/content/cartControl/cartControl";
import foodDetail from "./comppnents/foodDetail";

export default {
  name: "goods",
  components: {
    scroll,
    shopCart,
    cartControl,
    foodDetail
  },
  methods: {
    calcHeight() {
      let foodlist = this.$refs.foods;
      for (let i = 0; i < foodlist.length; i++) {
        let height = foodlist[i].offsetTop;
        this.listHeight.push(height);
      }
      this.listHeight.push(Number.MAX_VALUE);
      console.log(this.listHeight);
    },
    foodsScroll(position) {
      this.scrollY = -position.y;
      for (let i = 0; i < this.listHeight.length; i++) {
        if (
          this.currentIndex !== i &&
          this.scrollY >= this.listHeight[i] &&
          this.scrollY < this.listHeight[i + 1]
        ) {
          this.currentIndex = i;
        }
      }
    },
    menuClick(index) {
      this.$refs.scroll.scroll.scrollTo(0, -this.listHeight[index], 1000);
    },
    foodClick(food) {
      this.selectedFood = food;
      this.foodDetailShow = true;
    },
    backClick() {
      this.foodDetailShow = false;
    }
  },
  data() {
    return {
      goodsData: [],
      classMap: [],
      listHeight: [],
      scrollY: 0,
      currentIndex: 0,
      deliveryPrice: 0,
      minPrice: 0,
      selectedFood: {},
      foodDetailShow: false
    };
  },
  computed: {
    selectFoods() {
      let foods = [];
      this.goodsData.forEach(good => {
        good.foods.forEach(food => {
          if (food.count > 0) {
            foods.push(food);
          }
        });
      });
      return foods;
    }
  },
  created() {
    goodsData().then(res => {
      this.goodsData = res.data;
      this.$nextTick(() => {
        this.calcHeight();
      });
    });
    headerData().then(res => {
      this.deliveryPrice = res.data.deliveryPrice;
      this.minPrice = res.data.minPrice;
    });
    this.classMap = ["decrease", "discount", "special", "invoice", "guarantee"];
  },
};
</script>

<style lang="stylus" scoped>
@import '../../common/stylus/mixins.styl'
.goods
  position: absolute
  display: flex
  overflow: hidden
  top: 175px
  left: 0
  bottom: 46px
  width: 100%
  .menu-wrapper
    flex: 0 0 80px
    width: 80px
    background-color: #f3f5f7
    .menu-item
      display: table
      height: 54px
      width: 56px
      line-height: 14px
      padding: 0 12px
      border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      &.current
        position: relative
        z-index: 10
        margin-top: -1px
        background-color: #fff
        font-weight: 700
        .text
          border-bottom: 0
      .icon
        display: inline-block
        vertical-align: top
        margin-right: 2px
        width: 12px
        height: 12px
        background-size: 12px 12px
        background-repeat: no-repeat
        &.decrease
          bgimage('./img/decrease_3')
        &.discount
          bgimage('./img/discount_3')
        &.guarantee
          bgimage('./img/guarantee_3')
        &.invoice
          bgimage('./img/invoice_3')
        &.special
          bgimage('./img/special_3')
      .text
        display: table-cell
        vertical-align: middle
        width: 56px
        font-size: 12px
        line-height: 14px
  .foods-wrapper
    flex: 1
    .food-list
      width: 100%
    .title
      padding-left: 14px
      height: 26px
      line-height: 26px
      border-left: 2px solid #d9dded
      font-size: 12px
      color: rgb(147, 153, 159)
      background-color: #f3f5f7
    .food-item
      position: relative
      display: flex
      margin: 18px
      padding-bottom: 18px
      border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      &:last-child
        border-bottom: 0
        margin-bottom: 18px
      .icon
        flex: 0 0 57px
        margin-right: 10px
        img
          width: 57px
          height: 57px
      .content
        flex: 1
        .name
          margin: 2px 0 8px 0
          height: 14px
          line-height: 14px
          font-size: 13px
          color: rgb(7, 17, 27)
        .desc
          margin-bottom: 8px
          line-height: 13px
          font-size: 10px
          color: rgb(147, 153, 159)
        .extra
          line-height: 14px
          font-size: 10px
          color: rgb(147, 153, 159)
          .count
            margin-right: 12px
        .price
          font-weight: 700
          line-height: 24px
          .now
            margin-right: 8px
            font-size: 14px
            color: rgb(240, 20, 20)
          .old
            text-decoration: line-through
            font-size: 10px
            color: rgb(147, 153, 159)
        .cartcontrol-wrapper
          position: absolute
          right: 0
          bottom: 6px
</style>